<template>
  <view class="">
    <MescrollUni @down="downCallback" @up="upCallback" :up="upOption">
      <view class="product-layout">
        <view class="product-list">
          <block v-for="(item,index) in goodsList" :key="index"> 
            <view class="product-item">
              <!-- 爆品logo -->
              <image v-if="item.hot === '1'" class="img-logo" src="../../static/images/pick-hot.png" mode="widthFix"></image>
              <!-- 商品图片 -->
              <view class="product-image">
                <image class="img" :src="item.skuImage[0]" mode="aspectFill" lazy-load></image>
              </view>
              <!-- 商品内容 -->
              <view class="product-content">
                <!-- 商品标题 -->
                <view class="product-title show-line2">{{item.skuName}}</view>
                <!-- 商品标签 -->
                <view class="product-tag">
                  <block v-for="(v,i) in item.tagId" :key="i">
                     <image class="img" :src="v" mode="widthFix" lazy-load></image>
                  </block>
                </view>
                <!-- 商品价格 -->
                <view class="product-price"> 
                  <view class="left">
                    <view class="new-price">
                      <text class="big">￥{{filterNumber(item.ratePrice)}}</text>
                      <text class="small">{{filterNumber1(item.ratePrice)}}</text>
                    </view>
                    <view class="old-price">
                      {{item.price}}
                    </view>
                  </view>
                  <view class="right">
                    <text class="title">月销</text>
                    <text class="sale">{{item.monthSales}}</text>
                  </view>
                </view>
                <!-- 优惠 -->
                <view class="product-discount">
                  <view class="left">
                    <!-- 打折 -->
                    <view class="discount">{{discount(item)}}折</view>
                    <!-- 佣金 -->
                  <!--  <view class="commission">
                      <view class="title">佣金</view>
                      <view class="price"><text>￥</text>{{item.commission}}</view>
                    </view> -->
                  </view>
                  <!-- 转发 -->
                <!--  <view class="right">
                    <image class="share" src="http://www.hdtun.com/files/xcx/images/home-share.png" mode="widthFix"></image>
                  </view> -->
                </view>
              </view>
            </view>
          </block>
        </view>
      </view> 
    </MescrollUni>
  </view>
</template>

<script>
  import MescrollUni from '../../components/mescroll-uni/mescroll-uni.vue'
  export default {
    components: {MescrollUni},
    // props: {
    //   goodsList: {
    //     type: Array,
    //     default: () => {
    //       return []
    //     }
    //   }
    // },
    data() {
      return {
        downOption: {                     //下拉刷新
        	auto: false,
           textNoMore:'我是有底线的 >_<'
        },
        upOption: {                       //上拉加载下一页
        	auto: false,
        	page: {
        		num: 1,                   //起始页
        		size: 12,                 //一页条数
        	}
        },
        // 商品卡片列表
        goodsList: [],
        // 查询数据
        params: {
          // 分类
          categoryId: "",
          // 搜索关键字
          keywords: '',
          // 页码
          pageNum: 1,
          // 条数
          pageSize: 12,
          // 排序  排序字段：sortField: rate_price(价格)、share_commission(佣金)、month_sales(销量)
          sortField: '',
          // 排序方式：sortOrder: desc(降序) 、asc(升序)
          sortOrder: '',
        },
        isShowNoMore: false,
        totaPage: 0

      }
    },
    mounted() {
      this.getData(1,12)
    },
    methods: {
      getData(pageNum,pageSize) {
        let params = {
          categoryId: this.params.categoryId,
          keyword: "",
          pageNum: pageNum,
          pageSize: pageSize,
          sortField: "",
          sortOrder: "",
        }
        uni.request({
          url: 'https://api.hdtun.com/api/goods/list',
          data: params,
          success: (res) => {
            console.log('res',res)
            this.goodsList = pageNum == 1 ? res.data.data.list : [...this.goodsList,...res.data.data.list];
            this.totaPage= res.data.data.total;
          }
        })
      },
      mescrollInit(mescroll) {
      	console.log(mescroll)
      	// this.mescroll = mescroll;
      },
      // 下拉回调
      downCallback(mescroll){
        console.log('mescroll',mescroll)
        this.getData()
      	// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      	// loadSwiper();
      	// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
      	// mescroll.resetUpScroll()
      	
      	setTimeout(()=>{
      		console.log(666);
      		// 隐藏下拉加载状态
      		mescroll.endErr()
      	},1000)
      },
      upCallback(mescroll) {
        console.log('mescroll-num',mescroll.num)
        console.log('mescroll-size',mescroll.size)
        // this.params.pageNum = mescroll.num;
        // this.params.pageSize = mescroll.size;
        if(this.totalPage > this.page) {
          mescroll.endUpScroll(true);
         getData(mescroll.num,mescroll.size)
        } else {
          mescroll.endUpScroll(false);
        }
       
        
      },
      // 跳转到商品详情页
      jumpDetail(goodsId) {
        uni.navigateTo({
          url:'/pages/detail/detail?goodsId='+ goodsId
        })
      },
    },
    computed: {
      filterNumber() {
        return function(data) {
          if(String(data).indexOf(".")==-1){
            return parseInt(data) // 整数
          }else{
            return String(data).split(".")[0]
          }
        }
      },
      filterNumber1() {
        return function(data) {
          // 判断整数还是小数
          if(String(data).indexOf(".")==-1){
            // return parseInt(data)// 整数
          }else{
            return '.'+String(data).split(".")[1]
          }
        }
      },
      // 计算折扣价
      discount() {
        return function(val) {
          return (val.ratePrice*10 / val.price).toFixed(2)
        }
      },
    }
  }
</script>

<style scoped>
  /* 商品展示 */
  .product-layout {
    margin: 20upx 24upx 0;
  }
  .product-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    /* background-color: #ffffff; */
  }
  .product-item {
    width: 342upx;
    background-color: #ffffff;
    border-radius: 10upx;
    padding-bottom:16upx;
    margin-bottom: 20upx;
    overflow: hidden;
    position: relative;
  }
  .img-logo {
    display: block;
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    width: 54rpx;
    height: 60rpx;
  }
  /* 商品图片 */
  .product-image {
    width: 342upx;
    height: 342upx;
  }
  .product-image .img{
    width: 100%;
    height: 342upx;
    display: block;
  }
  /* 商品内容 */
  .product-content {
    padding: 0 12upx;
  }
  .product-title {
    text-align: justify;
    font-size: 24upx;
    color: #333333;
    margin-top: 10upx;
/*    height: 64upx; */
  }
  /* 商品标签 */
  .product-tag {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10upx;
  }
  .product-tag .img{
    width: 24upx;
    height: 24upx;
    display: block;
    margin-right: 6upx;
    border-radius: 6upx;
  }
  /* 商品价格 */
  .product-price {
    height: 48upx;
    line-height: 48upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }
  .product-price .left{
    display: flex;
    min-width: 114upx;
  } 
  .product-price .left .new-price{
    font-size: 24upx;
    color: #eb222e;
    margin-right: 9upx;
  } 
  .product-price .left .new-price .small{
    font-size: 18upx;
  } 
  .product-price .left .old-price{
    text-decoration: line-through;
    font-size: 18upx;
    color: #999999;
    transform: translateY(1px);
  } 
  .product-price .right{
    white-space: nowrap;
    font-size: 18upx;
  } 
  .product-price .right .title{
    margin-right: 7upx;
  }
  /* 商品折扣 */
  .product-discount {
    height: 26upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .product-discount .left{
    display: flex;
  }
  .product-discount .left .discount{
    min-width: 48upx;
    height: 22upx;
    line-height: 22upx;
    text-align: center;
    padding: 0 4upx 0 5upx;
    font-size: 16upx;
    background-color: #eb222e;
    border-radius: 4upx;
    color: #ffffff;
    margin-right: 6upx;
    border: 1upx solid #eb222e;
  }
  .product-discount .left .commission{
    min-width: 90upx;
    display: flex;
    border-radius: 4upx;
    border: 1upx solid #eb222e;
    height: 22upx;
    line-height: 22upx;
    font-size: 16upx;
  } 
  .product-discount .left .title{
    width: 42upx;
    height: 22upx;
    line-height: 20upx;
    text-align: center;
    background-color: #eb222e;
    color: #ffffff;
    border-radius: 4upx 0 0 4upx;
  }
  .product-discount .left .price{
    flex: 1;
    background-color: #ffffff;
    color: #eb222e;
    border-radius: 0 4upx 4upx 0;
  }
  /* 商品分享 */
   .product-discount .right {
    width: 24upx;
    height: 24upx;
  }
   .product-discount .right .share {
    width:100%;
    height: 100%;
    display: flex;
  }
</style>
